<!--
 * @Author: lucky
 * @Date: 2021-06-29 09:16:51
 * @LastEditors: wfz
 * @LastEditTime: 2021-07-03 11:35:25
 * @Description: 
-->
<template>
  <div>
    <div class="hold">
      <div class="ej">易洁家政</div>
      <div class="user">员工端</div>
      <div class="login-up">
        <van-form @submit="onSubmit">
          <van-field
            style="
              padding-top: 40px;
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
            "
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button class="log-btn" round block native-type="submit"
              >登录</van-button
            >
            <div class="zhuc"><a href="#">没有账号？点击注册</a></div>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login, info } from "@/api/user";
import { getToken, setToken, setinfo, setId } from "@/utils/auth";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      userData: [],
    };
  },
  computed: {},
  methods: {
    // 提交行为
    async onSubmit(values) {
      // console.log(values);
      // console.log(this.form);
      // 发请求，获取到后台的token，保存到cookies里，获取当前登录的用户信息
      //axios、baseURL、qs、js-cookie
      let res = await login(this.form);
      setToken(res.data.token);
      // let info = await info();
      // 路由跳转
      let fo = await info({ token: getToken() });
      setinfo(fo.data.id);
      this.$router.push("/index");
      // 梁
      // this.userData = res.data;
      // // 路由跳转
      // this.getUserId();
      // this.$router.push({
      //   path: '/index',
      // });
    },
    async getUserId() {
      let response = await info({ token: this.userData.token });
      console.log(response);
      setId(response.data.id);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.hold {
  width: 100vw;
  height: 570px;
  background-image: linear-gradient(#9fa5d5, #e8f5c8);
  padding-top: 120px;
  /* overflow: hidden; */
}
.ej {
  width: 100%;
  height: 62px;
  /* background-color: blueviolet; */
  text-align: center;
  line-height: 62px;
  font-family: "华光姚体_CNKI";
  font-size: 40px;
}
.user {
  width: 100%;
  height: 30px;
  /* background-color: burlywood; */
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  margin-top: 5px;
  font-family: "华光隶变_CNKI";
}
.login-up {
  width: 86%;
  height: 240px;
  margin: 7%;
  margin-top: 70px;
  background-color: white;
  border-radius: 8px;
}
.log-btn {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #eae5c9, #6cc6cb)
    repeat scroll 0% 0%;
}
.zhuc {
  margin-top: 15px;
  color: #4e95f7;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
</style>